<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .pic-box {
            width: 100%;
            /* height: 1300px; */
            background-color: #eee;
            padding-bottom: 50px;
        }

        .pic-header {
            /* 模块居中 */
            width: 1460px;
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }

        .pic-header h2 {
            color: #333;
            font-size: 34px;
            line-height: 60px;
            font-weight: normal;
        }

        .pic-header h4 {
            color: #999;
            font-size: 14px;
            font-weight: normal;
            line-height: 24px;
        }

        .pic-header .link-a {
            line-height: 60px;
        }

        .pic-header .link-a a {
            color: #333;
            text-decoration: none;
            font-size: 14px;
            padding: 0 10px;
        }

        .pic-header .link-a a:hover {
            color: #0cb46a
        }

        .pic-header .link-a span {
            color: #ccc;
        }

        /* 按照百分比设置模块宽度 */
        .pics {
            overflow: hidden;
        }

        .pics>div {
            float: left;
            line-height: 0;
        }

        .pic-l {
            width: 25%;
            /* background-color: #0cb46a; */
            box-sizing: border-box;
            padding-right: 10px;
        }

        .pic-m {
            width: 37.5%;
            /* background-color: #333; */
            box-sizing: border-box;
            padding-right: 10px;
        }

        .pic-r {
            width: 37.5%;
            /* background-color: aquamarine; */
        }

        /* 高度样式 */
        .pic-01 {
            width: 100%;
            /* padding和margin的百分比是根据宽度处理 */
            padding-top: 100%;
            /* 子绝父相 */
            position: relative;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .pic-01 img {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .pic-02 {
            width: 100%;
            padding-bottom: 65.417%;
            position: relative;
            overflow: hidden;
        }

        .pic-02 img {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .pic-03 {
            width: 100%;
            padding-top: 47.714%;
            position: relative;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .pic-03 img {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .pic-04 {
            width: 100%;
            padding-top: 61.4%;
            position: relative;
            overflow: hidden;
        }

        .pic-04 img {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .pic-05 {
            width: 100%;
            padding-top: 63.889%;
            position: relative;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .pic-05 img {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .pic-06 {
            width: 100%;
            padding-top: 43.2%;
            position: relative;
            overflow: hidden;
        }

        .pic-06 img {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <!-- html 结构 -->
    <div class="pic-box">
        <!-- 头 -->
        <div class="pic-header">
            <h2> 郑州装修效果图 </h2>
            <h4>搜索海量郑州装修家居美图，发现新家装修灵感</h4>
            <div class="link-a">
                <a href="#">现代简约</a>
                <span>/</span>
                <a href="#">欧式豪华</a>
                <span>/</span>
                <a href="#">美式经典</a>
                <span>/</span>
                <a href="#">中式现代</a>
                <span>/</span>
                <a href="#">北欧极简</a>
                <span>/</span>
                <a href="#">全部美图</a>
            </div>
        </div>
        <!-- 图 -->
        <div class="pics">
            <!-- 左 -->
            <div class="pic-l">
                <!-- 响应式高度 -->
                <div class="pic-01">
                    <img src="https://pic.to8to.com/case/2020/07/03/20200703150046-a416a7a2.jpeg" alt="">
                </div>
                <div class="pic-02">
                    <img src="https://pic.to8to.com/case/2020/07/03/20200703150041-a3e47550.jpeg" alt="">
                </div>
            </div>
            <!-- 中 -->
            <div class="pic-m">
                <div class="pic-03">
                    <img src="https://pic.to8to.com/case/2020/07/03/20200703150044-f2df366d.jpeg" alt="">
                </div>
                <div class="pic-04">
                    <img src="https://pic.to8to.com/case/2020/07/03/20200703150042-5230e769.jpeg" alt="">
                </div>
            </div>
            <!-- 右 -->
            <div class="pic-r">
                <div class="pic-05">
                    <img src="https://pic.to8to.com/case/2020/07/03/20200703150041-345c73fa.jpeg" alt="">
                </div>
                <div class="pic-06">
                    <img src="https://pic.to8to.com/case/2020/07/03/20200703145746-a0cc613b.jpeg" alt="">
                </div>
            </div>
        </div>
    </div>
    <span>新模块</span>
</body>

</html>